<template>
	<!-- <i-drawer v-if="showQy" v-model="showQy" :mask="false" :iclose="false">
		<view class="signing">
			<view style="width:calc(100% - 96rpx); margin: 0 auto;">
				<view class="images">
					<view class="textsx">
						尊敬的友电之星商家
					</view>
					<view class="texts">
						请签署提现协议
					</view>
				</view>
				<view class="title_text">{{selectData.accountType === "30002001" ? '对公账户': '对私账户'}}
					提现前需要签署提现协议，请签署完成后再次发起提现</view>
				<i-buttons color="#fff" bgColor="#FB652E" padding="18rpx 128rpx" radius="4rpx" border="none"
					size="32rpx" @click="toSigning">立即签约</i-buttons>
				<view @click="showQy = false" class="pop_buttom">取消</view>
			</view>
		</view>
	</i-drawer> -->
	<i-popup v-if="showTips" :confirmData="{title: '保存协议图片', color: '#FB652E'}" :closeData="{title: '取消', show: true}"
		@close="close" @confirm="confirm">
		<view class="withdrawal_body">
			<text class="text">温馨提示</text>
			<text>亲爱的用户，企业认证需上传商户合作协议，建议下载协议模板，在企业认证第一步“上传合作关系证明”将协议上传</text>
		</view>
	</i-popup>
	<i-drawer v-if="showQy" v-model="showQy" :mask="false" :iclose="false">
		<view class="signing">
			<view style="width:calc(100% - 96rpx); margin: 0 auto;">
				<view class="images">
					<image src="../../static/images/business_title.png" mode=""></image>
				</view>
				<view class="title_text">为了保证您的商户信息准确性，需校验您的企业信息，请及时进行认证。</view>
				<i-buttons color="#fff" bgColor="#FB652E" padding="18rpx 128rpx" radius="4rpx" border="none"
					size="32rpx" @click="goSign">立即认证</i-buttons>
				<view @click="hideQy" class="pop_buttom">关闭</view>
			</view>
		</view>
	</i-drawer>
	<view class="business">
		<!-- <view class="top_body">
			<view class="titles">到账方式</view>
			<view class="select_withdrawal" @click="goSelect">
				<view class="select_left">
					<view class="tops">
						<image v-if="selectData.id" src="../../static/images/bank_card_icon.png" mode=""></image>
						<text class="select_text">{{selectData.bankcardNum ? selectData.bankDeposit:  '选择提现方式'}}</text>
					</view>
					<text
						:style="{marginLeft: selectData.id ? '64rpx' : ''}">{{selectData.bankcardNum ? bankEncryption(selectData.bankcardNum)  : '选择或添加提现银方式'}}</text>
				</view>
				<view class="goto">
					<image src="../../static/images/goto_icon.png" mode=""></image>
				</view>
			</view>
		</view> -->
		<i-card top="20rpx">
			<view class="title">
				提现金额
			</view>
			<i-formItem align="top">
				<view class="price">
					<image src="../../static/images/CNY_icon.png" mode=""></image>
					<input placeholder-class="placeholder-class"  v-model="amount" type="text" placeholder="请输入提现金额">
				</view>
			</i-formItem>
			<view class="money">
				可提现余额 ¥{{merchantRevenue}}
				<text @click="amount = merchantRevenue">全部提现</text>
			</view>
		</i-card>
		<view class="message">
			<text>温馨提示</text>
			<text>1. 预计2个工作日内提现到账</text>
			<text>2. 提现金额100元起提</text>
		</view>
		<view class="buttons">
			<i-buttons radius="4" color="#fff" bgColor="#FB652E" padding="18rpx 0" @click="withdrawal">立即提现</i-buttons>
		</view>

		<view class="toDetail" @click="navTo('/pages/withdrawal/record', 'navigateTo')">
			<text>提现记录</text>
			<image src="../../static/images/right_blue_icon.png" mode=""></image>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {
		computed,
		ref
	} from 'vue';
	import {
		navTo,
		showTost,
		bankEncryption
	} from '../../utils/common'
	import {
		addMerCashOrder
	} from '../../api/store'
	import {
		getApiMerCashCardList
	} from '../../api/trilateral'
	import useStore from '../../stores/index'
	import { getTlUserAuth, getSignUrl } from '../../api/trilateral'
	import { getSignStatus } from '../../api/leshua'
	import {
		onUnload,
		onShow
	} from '@dcloudio/uni-app'

	const amount = ref('')
	const selectData = ref<any>({})
	const store = useStore()
	const showQy = ref(false)
	const tlData = ref<any>({})
	const showTips = ref(false)

	const confirm = async () => {
		uni.saveImageToPhotosAlbum({
			filePath: "https://tyj-apk-1258993110.cos.ap-nanjing.myqcloud.com/new_app/lsxy.jpg",
			success() {
				showTost('协议已保存到相册')
			},
			complete: function () {
				console.log('save success');
				showQy.value = true;
				if (showQy.value) {
					uni.hideTabBar();
				} else {
					uni.showTabBar();
				}
				showTips.value = false
			}
		});
	}

	const close = async ()=>{
		showTips.value = false;
		if (showQy.value) {
			uni.hideTabBar();
		} else {
			uni.showTabBar();
		}
		showQy.value = true;
	}


	const merchantRevenue = computed(() => {
		return store.storeInfo.merchantRevenue || 0
	})

	const withdrawal = async () => {
		if (!selectData.value) {
			uni.showToast({
				title: '您还未选择提现方式',
				icon: 'none'
			})
			return
		}
		if (!amount.value) {
			uni.showToast({
				title: '请填写提现金额',
				icon: 'none'
			})
			return
		}
		if (Number(amount.value) < 100) {
			uni.showToast({
				title: '商家提现需100起提',
				icon: 'none'
			})
			return
		}
		if (isNaN(Number(amount.value))) {
			uni.showToast({
				title: '请填写正确提现金额',
				icon: 'none'
			})
			return
		}

		if (merchantRevenue.value < Number(amount.value)) {
			showTost('提现金额不能大于可提现余额')
			return
		}


		// if ((selectData.value.accountType === "30002001" && tlData.value.signStatus !== 2) || (selectData.value.accountType === "30002002" && tlData.value.legalSignStatus !== 2)) {
		// 	showQy.value = true
		// 	return
		// }
		// if (tlData.value.signStatus !== 2) {
			// showQy.value = true
		// 	showTips.value = true
		// 	return
		// }
		const { data } = await addMerCashOrder({ amount: Number(amount.value), cardId: selectData.value.id })
		navTo('/pages/withdrawal/store_result?cashOrderId=' + data, 'redirectTo')
	}

	const getInfo = async () => {
		const { data } = await getTlUserAuth()
		tlData.value = data
		// console.log(signStatus, legalSignStatus, selectData.value.accountType, 'ressss');
	}

	const leshuaInfo = async () => {
		const { data } = await getSignStatus();
		tlData.value = {'signStatus': data}
	}


	const goSelect = () => {
		navTo('/pages/withdrawal/business_methods', 'navigateTo')
	}

	const merCashCardList = async () => {
		const { data } = await getApiMerCashCardList()
		if (data && data.length) {
			selectData.value = selectData.value?.id ? selectData.value : data[0]
		} else {
			selectData.value = {}
		}
	}

	const goSign = async () => {
		navTo('/pagesA/views/lscertification', 'navigateTo')
	}

	const hideQy = async () => {
        showQy.value = false;
	}

	const toSigning = async () => {
		// #ifdef APP-PLUS
		const { data } = await getSignUrl({ loginType: 0, accountType: selectData.value.accountType })
		store.setOilUrl(data)
		navTo('/pages/views/web_view', 'navigateTo')
		// #endif
		// #ifdef MP-WEIXIN
		const { data: data1 } = await getSignUrl({ loginType: 1, accountType: selectData.value.accountType })
		wx.navigateToMiniProgram({
			appId: 'wxc46c6d2eed27ca0a',
			path: 'pages/merchantAddress/merchantAddress',
			envVersion: 'release',
			extraData: {
				targetUrl: data1
			}
		})
		// #endif
		showQy.value = false
	}

	uni.$on('changePay', (data) => {
		selectData.value = data
	})

	onShow(() => {
		merCashCardList()
		// getInfo()
		leshuaInfo()
	})

	onUnload(() => {
		uni.$off('changePay', () => { })
	})
</script>

<style lang="scss" scoped>
	.withdrawal_body {
			@include flexCC;
			@include dfont;
			padding: 48rpx 0;

			.text {
				@include titlefont(32rpx);
				font-weight: bold;
				margin-bottom: 32rpx;
			}
	}
	.business {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		background-color: $backColor;

		.top_body {
			width: calc(100% - 64rpx);
			margin: 0 auto;
			padding-bottom: 20rpx;

			.titles {
				@include dfont;
				color: #2C2C2E;
				margin: 24rpx 0;
			}
		}

		.select_withdrawal {
			@include flexRS;

			.select_left {
				@include flexC;
				@include dfont(24rpx);
				color: #A0A0AD;

				.tops {
					@include flexR;

					image {
						width: 40rpx;
						height: 40rpx;
						margin-right: 16rpx;
					}
				}

				.select_text {
					@include titlefont(32rpx);
					margin-bottom: 10rpx;
				}
			}

			image {
				width: 12rpx;
				height: 20rpx;
			}
		}

		.price {
			@include flexR;

			image {
				width: 24rpx;
				height: 56rpx;
				margin-right: 24rpx;
			}

			input {
				font-size: 40rpx;
			}
		}

		.money {
			margin-top: 32rpx;
			@include dfont(28rpx);
			color: #A0A0AD;

			text {
				color: #5C6D80;
				margin-left: 24rpx;
			}
		}

		.message {
			@include flexC;
			padding: 0 32rpx;
			margin-top: 20rpx;

			text {
				margin-bottom: 12rpx;
				@include dfont(26rpx);
				color: #A0A0AD;
				letter-spacing: 2rpx;
			}
		}

		.buttons {
			width: calc(100% - 48rpx);
			margin: 48rpx auto;
		}

		.toDetail {
			@include flexRC;

			image {
				width: 40rpx;
				height: 40rpx;
			}

			text {
				@include dfont;
				color: #5C6D80;
			}
		}

		.radios {
			@include flexR;
			align-items: flex-start;
			width: calc(100% - 48rpx);
			margin: 0 auto;
			@include dfont(26rpx);
			color: #A0A0AD;

			.xy {
				margin-bottom: -6rpx;

				text {
					color: $dcolor
				}
			}
		}

		.title {
			@include dfont;
			margin-bottom: 20rpx;
		}
	}

	.pay_withdrawal {
		@include flexRS;
		color: #fff;

		.select_left {
			@include flexR;

			.left_title {
				@include flexC;
				@include dprice(32rpx);
				color: #fff;

				.select_text {
					@include titlefont(32rpx);
					margin-bottom: 6rpx;
					color: #fff;
				}
			}

			image {
				width: 64rpx;
				height: 64rpx;
				margin-right: 24rpx;
			}
		}

		image {
			width: 12rpx;
			height: 20rpx;
		}
	}

	.signing {
		@include flexC;
		width: 100%;
		padding: 68rpx 0 28rpx 0;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
		background: linear-gradient(180deg, rgba(251, 101, 46, 0.2) 0%, rgba(243, 244, 245, 1) 50%, rgba(255, 255, 255, 1) 100%);

		.title_text {
			@include dfont(28rpx);
			line-height: 1.8;
			color: #A0A0AD;
			margin-bottom: 130rpx;
		}

		.images {
			width: 322rpx;
			height: 96rpx;
			margin-bottom: 64rpx;

			.textsx {
				@include dfont(26rpx);
				margin-bottom: 16rpx;
			}

			.texts {
				@include titlefont(38rpx);
				font-style: italic;
			}

			image {
				width: 322rpx;
				height: 96rpx;
			}
		}

		.image {
			width: 414rpx;
			height: 96rpx;
			margin-bottom: 64rpx;

			image {
				width: 414rpx;
				height: 96rpx;
			}
		}

		.pop_buttom {
			@include flexRC;
			@include dfont(26rpx);
			color: #a0a0a0;
			margin-top: 18rpx;
			margin-bottom: 48rpx;
		}
	}
</style>